<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐</title>

    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/audio.css">

</head>

<body background="./img/bg0.png"> 
    <!-- 上半部分 -->
    <div class="upper-container">
        <!-- 唱片，背景 -->
        <div class="record-container">
            <div class="record-bg">
                <!-- 这里要旋转图片，所以不用img -->
                <div class="rotate-play"> </div>
            </div>
        </div>
    
        <!-- 音乐介绍，歌名 -->
        <div class="introduce-container">
            <!-- 在外面多包一层div，加边距就不会把一整个挤下去 -->
            <div class="text-container">
                <!-- 歌名 -->
                <div class="music-title">song name</div>
    
                <!-- 作者 -->
                <div class="author-container">
                    作者：
                    <span class="author-name">ren</span>
                    \23215220213 孙涛
                </div>
            </div>
    
        </div>
    
    </div>

    <!-- 下半部分 -->
    <div class="audio-box">
        <!-- 放所有控件 -->
        <div class="audio-container">
            <!-- 放mp3 -->
            <audio id="audioTag"></audio>
    
            <!-- 进度条 -->
            <div class="a-progress">
                <!-- 播放进度部分 -->
                <div class="pgs-total">
                    <div class="pgs-play" id="progress" width="10px">
                        <!-- 这里的width是0，因为进度条还没开始播放 -->
    
                    </div>
    
                </div>
    
            </div>
    
            <!-- 下排控制按钮 -->
            <div class="a-controls">
                <!-- 时间 -->
                <div class="time-container">
                    <!-- 实际播放时长 -->
                    <span class="played-time">00:00</span>
                    &nbsp;/&nbsp; <!-- 解析为空格 -->
                    <!-- 总时长 -->
                    <span class="audio-time">00:00</span>
                </div>
    
                <!-- 按钮 -->
                <div class="center-button-container">
                    <!-- 模式切换 -->
                    <div class="mode center-icon"></div>
                    <!-- 上一首 -->
                    <div class="s-left center-icon"></div>
                    <!-- 播放/暂停 -->
                    <div class="icon-play center-icon"></div>
                    <!-- 下一首 -->
                    <div class="s-right center-icon"></div>
                    <!-- 音量 -->
                    <div class="volume center-icon"></div>
                    <!-- 音量进度条 -->
                    <input id="volume-togger" type="range" name="change" value="70" min="0" max="100" step="1">
    
                </div>
    
                <!-- 后部按钮 -->
                <div class="bottom-button-container">
                    <!-- 列表 -->
                    <div class="list bottom-icon"></div>
                    <!-- 倍速 -->
                    <div class="speed bottom-icon">1.0X</div>
                    <!-- mv -->
                    <div class="mv bottom-icon"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 播放列表 -->
    <div class="close-list"></div>

    <div class="list-card-show music-list">
        <div class="music-list-container">
            <div class="music-list-title">播放列表</div>
            <hr class="line"> <!-- 列表分割线 -->
            <div class="all-list">
                <div id="music0">恋人心</div>
                <div id="music1">爱情讯息</div>
                <div id="music2">今天你要嫁给我</div>
                <div id="music3">棉花糖</div>
            </div>
        </div>
    </div>

</body>

</html>

 <script src="./js/music.js"></script>
